<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <custom-element style="color: aqua;" custom="sss">111</custom-element>
    <custom-test id="test" data-color="red" data-text="333">222</custom-test>
    <button id="btn">移除customtest</button>
    <button id="btn1">改变customtest 的属性</button>
    <button id="btn2">移动customtest</button>
    <iframe id="iframe" src="test.html"></iframe>
    <div id="container" style="border: 1px solid #ccc; height: 200px;">

    </div>
<script src="index.js"></script>
<script>
    window.onload=()=>{
        let node=document.querySelector("#test")
        document.querySelector("#btn").addEventListener("click",(e)=>{
            document.body.removeChild(node)
        })
        document.querySelector("#btn1").addEventListener("click",(e)=>{
            node.setAttribute("data-color","blue")
            node.setAttribute("data-text","444")
        })
        document.querySelector("#btn2").addEventListener("click",()=>{
            let iframe=document.querySelector("#iframe")
            let child=iframe.contentWindow.document.body.firstChild
            newDiv.appendChild(document.adoptNode(child))
        })
        var newDiv=document.querySelector("#container")
    }
</script>
</body>
</html>